<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="profile.photo" @click="$refs.iptFile.click()" />
          <!-- file 选择框 -->
          <input type="file" ref="iptFile" v-show="false" accept="image/*" @change="onFileChange" />
        </template>
      </van-cell>
      <van-cell title="名称" :value="profile.name" is-link  @click="nameClickFn"/>
      <van-cell title="生日" :value="profile.birthday" is-link @click="birthdayClickFn" />
    </van-cell-group>

    <!-- 修改名称的弹出框 -->
    <van-dialog v-model="isNameShow" title="修改名称" show-cancel-button :beforeClose='beforeCloseFn'>
        <van-field v-model="value" placeholder="请输入新的名称" input-align='center' ref="inp" />
    </van-dialog>

    <!-- 修改生日的弹出框 -->
    <van-popup v-model="isBirthdayShow" position="bottom">
    <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
      @confirm="dateTimePickerClickFn" @cancel="isBirthdayShow=false" />
    </van-popup>
  </div>
</template>

<script>
import { userProfileAPI, updatePhotoAPI, updateprofileAPI } from '@/api'
import { Toast, Notify } from 'vant'
import { formateDate } from '@/utils/date'
export default {
  name: 'UserEdit',
  data () {
    return {
      profile: {}, // 用户基本资料
      isNameShow: false, // 修改姓名弹出框的显示与隐藏
      value: '', // 当前修改姓名的输入框的值
      minDate: new Date(1980, 0, 1), // 最小范围
      maxDate: new Date(), // 最大范围
      currentDate: new Date(), // 当前
      isBirthdayShow: false// 控制生日的弹出层
    }
  },
  methods: {
    // 文件选择方法
    async onFileChange (ev) {
      // console.log(ev.target.files[0])
      if (ev.target.files.length === 0) return // 防止用户未选择图片
      const fd = new FormData()
      fd.append('photo', ev.target.files[0]) // photo在表单里参数名携带
      const res = await updatePhotoAPI(fd)
      this.profile.photo = res.data.data.photo // 更新最新头像
      this.$store.commit('SET_USERPHOTO', res.data.data.photo)
      Toast('修改成功')
    },
    // 姓名修改
    nameClickFn () {
      this.isNameShow = true
      this.value = this.profile.name
      setTimeout(() => {
        this.$refs.inp.focus()
      }, 0)
    },
    // 姓名 弹出框 关闭前的回调
    async   beforeCloseFn (action, done) {
      if (action === 'confirm') {
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/
        if (reg.test(this.value)) {
          this.profile.name = this.value
          const result = await updateprofileAPI({ name: this.profile.name })
          if (result.status === 200) {
            Toast('修改成功')
            done()
          }
        } else {
          Notify({ type: 'danger', message: '请输入1-7位的字符' })
          done(false)
        }
      } else {
        done()
      }
    },
    // 生日修改 弹出框
    birthdayClickFn () {
      this.isBirthdayShow = true
      this.currentDate = new Date(this.profile.birthday)
    },
    // 弹出框的确认时间
    async dateTimePickerClickFn () {
      const result = await updateprofileAPI({ birthday: formateDate(this.currentDate) })
      if (result.status === 200) {
        this.profile.birthday = formateDate(this.currentDate)
        Toast('修改成功')
        this.isBirthdayShow = false
      }
    }
  },
  // 获取用户资料
  async created () {
    const res = await userProfileAPI()
    this.profile = res.data.data
  }
}
</script>

<style lang="less" scoped>
  .user-edit-container {
    padding-top: 46px;

    .avatar {
      width: 50px;
      height: 50px;
    }
  }
</style>
